<template>
    <div class="page">
        <van-row type="flex" justify="space-between" class="banner">
            <div class="user_info">
                <van-image round :src="wxInfo.headimgurl" fit="cover" class="avatar"/>
                <div class="user_text_info">
                    <h2 class="user_name">{{wxInfo.nickname}}</h2>
                    <!--<p class="login_ip">ID:282828121212</p>-->
                </div>
            </div>
            <van-image class="banner_right" :src="require('@/assets/images/bg_banner_left_football.png')"/>
        </van-row>
        <van-cell-group class="main_panel top_panel">

            <van-cell title="基本信息" is-link to="/personCenter/user_info">
                <van-icon class="iconfont" class-prefix="icon" slot="icon" name="dangan"/>
            </van-cell>
            <van-cell title="修改密码" is-link icon="shop-o" to="/personCenter/edit_password">
                <van-icon class="iconfont" class-prefix="icon" slot="icon" name="suo1"/>
            </van-cell>
        </van-cell-group>
        <van-cell-group class="main_panel ">
            <van-cell title="班级管理" is-link icon="shop-o" to="/class_manage">
                <van-icon class="iconfont" class-prefix="icon" slot="icon" name="nianjiguanli"/>
            </van-cell>
        </van-cell-group>
        <van-cell-group class="main_panel ">
            <van-cell title="我的订单" is-link icon="shop-o"  to="/order_list">
                <van-icon class="iconfont" class-prefix="icon" slot="icon" name="dingdanguanli-"/>
            </van-cell>
        </van-cell-group>
        <van-cell-group class="main_panel ">
            <van-cell title="退出登录" is-link icon="shop-o" @click="handleLogOut">
                <van-icon class="iconfont" class-prefix="icon" slot="icon" name="app_icons--"/>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
import $store from "@/store/index";
import $router from "@/router/index";

export default {
  name:'personCenter',
  components: {},
  data(){
    return{
      wxInfo:{
        headimgurl:'',
      }
    }
  },
  mounted(){
    if(localStorage.getItem('WxInfo')){
      this.getWxInfo()
    }
  },
  methods: {
    getWxInfo(){
      this.wxInfo=JSON.parse(localStorage.getItem('WxInfo'))
    },
    handleLogOut() {
      $store.dispatch("user/logout");
      $router.replace("/login");
    },
  },
};
</script>

<style scoped lang="scss">
    .main_panel {
        margin-top: 20px;
        &.top_panel {
            margin-top: -40px;
        }
        .van-cell{
            .iconfont{
                font-size: 30px;
                color: #333;
                margin-right: 24px;
                width: 32px;
                &.icon-nianjiguanli{
                    font-size: 28px;
                }
                &.icon-suo1{
                    font-size: 38px;
                }
                &.icon-app_icons--{
                    font-size: 30px;
                }
            }
        }
    }
    .banner_right {
        width: 268px;
        height: 280px;
        margin-right: 40px;
        margin-top: 18px;
    }
    .user_info {
        display: flex;
        align-items: center;
        margin-left: 60px;
        margin-top: -80px;
        .avatar {
            width: 120px;
            height: 120px;
        }
        .user_text_info {
            padding-left: 30px;
            color: #fff;
            .user_name {
                font-size: 30px;
                font-weight: normal;
                margin: 0;
            }
            .login_ip {
                font-size: 24px;
                margin: 20px 0 0;
            }
        }
    }
</style>
